<template>
  <el-dialog
    v-if="visible"
    :visible.sync="visible"
    :show-close="false"
    width="680px"
    @click.capture.native="$track.clickStat($track.formatParams('GUIDE_VIDEO', currVideoTitle))"
  >
    <span
      @click="
        visible = false;
        StepIndex = 0;
      "
      class="el-dialog__close el-icon el-icon-close close"
    ></span>
    <div class="title">{{ title }}</div>
    <div class="Content">
      <template v-for="(item, index) in steps">
        <template v-if="item.type === 'video'">
          <video
            :key="index"
            v-if="StepIndex === index"
            autoplay
            controls
          >
            <source :src="item.url" type="video/mp4" />
          </video>
        </template>
        <template v-if="item.type === 'image'">
          <img
            :key="index"
            v-show="StepIndex === index"
            :src="item.url"
          />
        </template>
      </template>
    </div>
    <div class="Copywriting">
      <span style="margin-right: 10px">
        {{ StepIndex + 1 }}/{{ steps.length }}
      </span>
      {{ steps[StepIndex].text }}
    </div>
    <div class="dialog-footer">
      <span @click="OpenWindow" class="link">{{$t('common.base.learnMoreView')}}</span>
      <el-button @click="StepIndex--" v-show="StepIndex !== 0">
        {{$t('common.base.previousStep')}}
      </el-button>
      <el-button
        @click="StepIndex++"
        v-if="StepIndex !== steps.length - 1"
        type="primary"
      >
      {{$t('common.base.nextStep')}}
      </el-button>
      <el-button
        @click="
          visible = false;
          StepIndex = 0;
        "
        v-else
        type="primary"
      >
        {{$t('common.base.experienceNow')}}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { conversionLink } from '@src/util/linkSwitch';
import i18n from '@src/locales'
export default {
  props: {
    title: {
      type: String,
      default: i18n.t('common.base.guide')
    },
    steps: {
      type: Array,
      default: () => {
        return []
      }
    },
    moreUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      StepIndex: 0,
    };
  },
  computed: {
    currVideoTitle() {
      return this.title + (this.StepIndex + 1)
    }
  },
  methods: {
    OpenWindow(){
      const url = conversionLink(this.moreUrl);
      window.open(url);
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog .el-dialog__header {
  background: #fff;
  padding: 0;
}
.link {
  font-size: 14px;
  margin-right: 16px;
  color: #9D9D9D;
  cursor: pointer;
  transition: color .3s;
}
.link:hover {
  color: $color-primary-light-6;
}
.product-menu-form {
  margin: 10px 20px;
}
.title {
  width: 100%;
  text-align: center;
  font-size: 18px;
  color: #060606;
  letter-spacing: -0.6px;
  line-height: 16px;
  font-weight: 500;
}
.Content {
  width: 640px;
  height: 360px;
  overflow: hidden;
  margin: 20px auto;
  video {
    width: 100%;
    height: 100%;
  }
  img {
    width: 100%;
  }
}
.Copywriting {
  width: 640px;
  margin: 0 auto;
  font-size: 14px;
  color: #060606;
  letter-spacing: 0;
  line-height: 14px;
  font-weight: 400;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 22px;
}
.close {
  position: absolute;
  right: 20px;
  top: 27px;
  z-index: 1000;
  cursor: pointer;
  font-size: 20px;
}
</style>